<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
    <script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="js/table.js" charset="UTF-8"></script>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="js/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
    <script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
    <script src="js/tree.js"></script>
    <script src="js/ztree/js/jquery.ztree.core.min.js"></script>
    <script src="js/ztree/js/jquery.ztree.excheck.min.js"></script>
</head>
<body class="gray-bg">
<div id="role">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">

            <div class="col-sm-12">
                <!-- Example Events -->
                <!--<h4 class="example-title">事件</h4>
                    <div class="example">
                        <div class="alert alert-success" id="examplebtTableEventsResult" role="alert">
                            事件结果
                        </div>-->
                        <div class="btn-group hidden-xs" id="toolbar" role="group">
                            <button type="button" @click="addModel" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                            </button>
                            <button type="button"  class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
                            </button>
                            <button type="button" id="delBatch" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                            </button>
                        </div>
                        <table id="table" data-height="600" data-mobile-responsive="true">

                        </table>
                    </div>
                </div>
                <!-- End Example Events -->
            </div>
        </div>
    </div>
    <!-- End Panel Other -->
    <!-- 添加模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><span>新增</span></h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>角色名称</label>
                        <input type="text" v-model="roleName" class="form-control" required="required"  placeholder="角色名称">
                    </div>
                        <!--<table class="treeTable" data-mobile-responsive="true"></table>-->
                        <div>
                            <ul id="tree" class="ztree"></ul>
                        </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click.stop="save">
                            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 修改模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><span>修改</span></h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>角色名称</label>
                        <input type="text" name="roleName" class="form-control" id="roleName" required placeholder="角色名称">
                        <input type="hidden" name="roleId" class="form-control" id="roleId" placeholder="角色id">
                        <input type="hidden" name="ids" class="form-control" id="ids" placeholder="角色id">
                    </div>
                    <ul id="uztree" class="ztree"></ul>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                        </button>
                        <button type="button" id="edit" class="btn btn-primary" data-dismiss="modal">
                            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<script type="text/javascript">




    var defaultColunms = [
        {
            field: 'checkStatus',
            checkbox: true
        },  //给多选框赋一个field值为“checkStatus”用于更改选择状态!!!!!

        {
            field: 'roleId',
            title: 'id',
            align: 'center'
        }, {
            field: 'roleName',
            title: '角色名称',
            align: 'center'
        }, {
            field: 'ad',
            title: '操作',
            align: 'center',
            formatter: function (value, row, index) {
                var result = "";
                result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewByIda('" + row.roleId + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs blue'  onclick=\"EditViewById('" + row.roleId + "','" + row.roleName + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs red'  title='删除'  onclick=\"DelViewById('" + row.roleId + "')\"><span class='glyphicon glyphicon-remove'></span></a>";
                return result;
            }
        }];


    $(function () {

        //1.初始化Table
        var oTable = new TableInit('#table', 'http://127.0.0.1:8085/sysRole', defaultColunms,$("#roleName").val());
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();


        //修改
        $("#edit").on("click", function () {

            var treeObj = $.fn.zTree.getZTreeObj("tree");
            var  nodes = treeObj.getCheckedNodes(true);
            var postData = "";
            $.each(nodes,function(i) {
                postData +=  this.id;
                if (i < nodes.length - 1) {
                    postData += ",";
                }
            });
            $.ajax({
                url: 'http://127.0.0.1:8085/sysRole',
                dataType: 'json',
                type: 'post',
                data: {_method: "put", roleName: $("#roleName").val(),roleId:$("#roleId").val(),ids:postData},
                success: function (data) {
                    if (data == true) {
                        $("#table").bootstrapTable('refresh');
                    }
                }
            })
        });



        //删除按钮事件
        $("#delBatch").on("click", function () {
            var rows = $("#table").bootstrapTable('getSelections');
            if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
                alert("请先选择要删除的记录!");
                return;
            } else {
                var arrays = new Array();// 声明一个数组
                $(rows).each(function () {// 通过获得别选中的来进行遍历
                    arrays.push(this.roleId);// cid为获得到的整条数据中的一列
                });
                var ids = arrays.join(','); // 获得要删除的id
                // 批量删除
               del(ids);
            }
        })

    });

    //注册删除按钮的事件
    function DelViewById(ids) {
        del(ids);
    }

    function del(ids) {
        $.ajax({
            url: "http://127.0.0.1:8085/sysRole/" + ids,
            type: "POST",
            dataType: "json",
            data: {_method: "delete"},
            success: function (data) {
                if (data == true) {
                    $("#table").bootstrapTable('refresh');
                }
            }
        })
    }
    //获取选中的id
    function permissionCheck(e,treeId,treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        var  nodes = treeObj.getCheckedNodes(true);
        var idA = new Array();
        for (var i=0;i<nodes.length;i++){
            idA.push( nodes[i].id );
        }
        return idA;
    }


        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            check: {
                enable: true
            },
            data: {
                key: {
                    name: "resName",
                    url: "aaaa"
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",

                }
            },
            callback: {
                beforeCheck: true,
                onCheck: permissionCheck
            }
        }

    //修改模态框
    function EditViewById(id, name) {
        $('#editModal').modal();
        $.ajax({
            url: 'http://127.0.0.1:8085/sysPermission',
            dataType: 'json',
            type: 'get',
            data: {},
            success: function (data) {
                zTreeObj = $.fn.zTree.init($(".ztree"), setting, data);
                zTreeObj.expandAll(true);
            }
        })
        $.ajax({
            url: 'http://127.0.0.1:8085/sysPermission/role/' + id,
            dataType: 'json',
            type: 'get',
            data: {},
            success: function (data) {
                for (var i=0; i <data.length; i ++){
                    zTreeObj.checkNode(zTreeObj.getNodeByParam("id", data[i].id),true,true);
                }

            }
        })
        $("#roleName").val(name);
        $("#roleId").val(id);
    }


    var vm = new Vue({
        el: '#role',
        data: {
            roleName: '',
            flag: true,
            zNodes: [],
            idArr:[]
        },
        beforeCreate() {

        },
        methods: {
            addModel() {
                $('#myModal').modal();
                this.$http.get('http://127.0.0.1:8085/sysPermission').then(function (res) {
                    if (res.status == 200) {
                        this.zNodes = res.body;
                        //初始化zTree
                        zTreeObj = $.fn.zTree.init($(".ztree"), setting, this.zNodes);
                        zTreeObj.expandAll(true);

                    }
                }, function (res) {
                    console.log(res.status);
                });


            },
            save() {
                var treeObj = $.fn.zTree.getZTreeObj("tree");
                var  nodes = treeObj.getCheckedNodes(true);
                var postData = "";
                $.each(nodes,function(i) {
                    postData +=  this.id;
                    if (i < nodes.length - 1) {
                        postData += ",";
                    }
                });

                console.log(postData);

                this.$http.post('http://127.0.0.1:8085/sysRole', {roleName: this.roleName,ids:postData}, {emulateJSON: true}).then(function (res) {
                    if (res.status == 200) {
                        $("#myModal").modal('hide');
                        $("#table").bootstrapTable('refresh');
                    }
                }, function (res) {
                    console.log(res.status);
                });
            },
            edi() {
                $('#myModal').modal();
            }

        },
        // 渲染后执行
        mounted() {
            // this.getMenus(); // 调用数据初始化函数
        },
    })

</script>

</body>
</html>